<template>
  <div>
    <header class="app-header">登录</header>
    <div class="login-title">
      <div>账号登录</div>
    </div>
    <div class="login-agreement">
      <div>
        登录即表示同意
        <span>“用户协议”</span>和
        <span>“隐私政策”</span>
      </div>
    </div>
    <form onSubmit="return false">
      <div class="login-username">
        <input type="text" v-model="form.loginName" placeholder="用户名/手机">
      </div>
      <div class="login-username">
        <input type="text" v-model="form.loginKey" placeholder="密码">
      </div>
      <div class="login-btn">
        <button @click="doLogin" class="disabled">登录</button>
      </div>
    </form>

  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { getData } from '@/static/session/setForm.js'
export default {
  data () {
    return {
      form: {
        loginName: 'admin',
        loginKey: '111111'
      }
    }
  },
  mounted () {
    this.postLogin(this.form)
    // console.log(this.getData)
  },
  methods: {
    ...mapActions('login', ['postLogin']),
    doLogin () {
      // if (this.loginName && this.loginKey.trim()== '') {
      //   return
      // }
      // if(this.getData==undefined){
      // return
      // }
      // console.log(this.form)
      this.postLogin({ form: this.form })
      this.$router.back()
      this.$toast('登录成功',1500,70)
    }
  }
}
</script>

<style scoped>
.login-title {
  padding: 30px 15px 10px;
}

.login-title div {
  font-size: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-agreement {
  padding: 0 15px 10px;
}

.login-agreement div {
  font-size: 14px;
  color: #ccc;
  /* width: 300px; */
}

.login-agreement span {
  color: #999999;
  cursor: pointer;
}

.login-username {
  display: flex;
  padding: 30px 10px 15px;
  border-bottom: 1px solid #ccc;
  margin: 30px 10px;
}

.login-username input {
  flex-grow: 1;
  border: none;
  outline: none;
  height: 30px;
  font-size: 30px;
  width: 100%;
}

.login-btn {
  display: flex;
  padding: 30px 10px 15px;
}

.login-btn button {
  flex-grow: 1;
  height: 50px;
  border: none;
  background-color: #0099cc;
  border-radius: 5px;
  color: #fff;
  font-size: 19px;
}
.disabled[disabled] {
  opacity: 0.5;
}
</style>